
<!DOCTYPE html>
<html>
<head>
	<title>后台管理首页</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		body {
			font-family: Arial, sans-serif;
			background-color: #f5f5f5;
			min-width: 100%;
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		
		.container {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: center;
			background-color: #fff;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
			width: 90%;
			max-width: 1300px;
			height: 90vh;
		}
		
		.toolbar {
			display: flex;
			flex-direction: column;
			background-color: #f5f5f5;
			width: 20%;
			height: 100%;
			padding: 1rem;
		}
		
		.toolbar ul {
			list-style-type: none;
			margin: 1rem 0;
			padding: 0;
		}
		
		.toolbar ul li {
			margin: 0.5rem 0;
			padding: 0.5rem;
			border-radius: 5px;
			color: #666;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		
		.toolbar ul li:hover {
			background-color: #ccc;
			color: #fff;
		}
		
		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 1rem;
			width: 80%;
			height: 100%;
		}
		
		h1 {
			margin: 1rem 0;
		}
		
		h2 {
			margin: 1rem 0;
		}
		
		.main {
			display: none;
		}
		
		.active {
			display: block;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="toolbar">
			<ul>
				<li onclick="showMain('user')">用户管理</li>
				<li onclick="showMain('permission')">权限管理</li>
				<li onclick="showMain('system')">系统设置</li>
			</ul>
		</div>
		<div class="content">
			<h1>欢迎来到后台管理系统首页</h1>
			<div id="user" class="main">
				<h2>用户管理页面</h2>
				<p>这里是用户管理页面，可以添加、删除和修改用户信息</p>
			</div>
			<div id="permission" class="main">
				<h2>权限管理页面</h2>
				<p>这里是权限管理页面，可以设置用户的权限和角色</p>
			</div>
			<div id="system" class="main">
				<h2>系统设置页面</h2>
				<p>这里是系统设置页面，可以修改后台系统的基本选项，例如：网站标题、网站logo、备案号等等</p>
			</div>
		</div>
	</div>
	<script>
		function showMain(id) {
			//隐藏所有的内容
			var mains = document.getElementsByClassName("main");
			for (var i = 0; i < mains.length; i++) {
				mains[i].classList.remove("active");
			}

			//显示当前被点击的内容
			document.getElementById(id).classList.add("active");
		}
	</script>
</body>
</html>